<template>
    <div class="welcome-container" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }">
      <div class="introduction-text">
        {{ introduction }}
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Welcome',
    props: {
      backgroundImage: {
        type: String,
        default: 'https://pic.52112.com/180603/JPG-180603_247/nTvAicjmJx_small.jpg'
      },
      introduction: {
        type: String,
        default: '欢迎使用港口堆存费管理系统'
      }
    }
  }
  </script>
  
  <style scoped>
  .welcome-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .introduction-text {
    max-width: 600px;
    width: 100%;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
    text-align: center;
    font-size: 1.2em;
    border-radius: 8px;
  }
  </style>
  